window.addEventListener('load', function() {
    var list_up = document.querySelectorAll('.list-up'); //所有上移按钮
    var list_down = document.querySelectorAll('.list-down'); //所有下移按钮
    var list_del = document.querySelectorAll('.list-del'); //所有删除按钮    
    // 1.上移
    list_up.forEach(value => {
        value.addEventListener('click', function() {
            let li = this.parentNode.parentNode;
            list_ul.insertBefore(li, li.previousElementSibling);
        });
    });
    // 2.下移
    list_down.forEach(value => {
        value.addEventListener('click', function() {
            let li = this.parentNode.parentNode;
            list_ul.insertBefore(li.nextElementSibling, li);
        });
    });
    // 3.删除
    list_del.forEach(value => {
        value.addEventListener('click', function() {
            this.parentNode.parentNode.remove();
        });
    });
    // 4.项目
    list_add_show.addEventListener('click', () => {
        list_bottom.insertAdjacentHTML('beforeend', '<div class="list-add-area">添加到列表：<input class="list-add-input" type="text" name="list[]"><input class="list-add-add" type="button" value="添加"><input class="list-add-cancel" type="button" value="取消"></div>');
        // 4.1取消项目
        document.querySelectorAll('.list-add-cancel').forEach(function(value) {
            value.addEventListener('click', function() {
                this.parentNode.remove();
            });
        });
        // 4.2添加项目
        document.querySelectorAll('.list-add-add').forEach(function(value) {
            value.addEventListener('click', function() {
                if (this.previousElementSibling.value.trim() !== '') {
                    list_ul.insertAdjacentHTML('beforeend', '<li class="list-option"><input class="list-input" type="text" value=' + this.previousElementSibling.value + '><span class = "list-btn"><span class = "list-up"> [上移] </span><span class="list-down"> [下移] </span><span class = "list-del"> [删除] </span></span></li>')
                    this.parentNode.remove();
                    fn();
                } else {
                    alert('请不要输入空格');
                }
            });
        });
    });
});